7.3 AngularJS

  1. Motivations
    • Do you remember how you can include PHP code in HTML code in the server side?
    • Can you embed any programming code into HTML code in the client side?
    • How to bind user input to output?
      Enter a name: , Output: Hello {{name}} !
      Enter a name: , Output: Hello {{name}} !
      How to implement it?

  2. AngularJS Tutorial
    • Read all in AngularJS Tutorial.
      • Bootstrap uses classes. AngularJS extends HTML with new ???
      • What are single page applications?
      • Can you imagine how AngularJS is implemented?
      • Trial 1: Let's try to write a name.


      • Why do you think the above "Trial 1" does not work correctly?    All the AngularJS information is read only right after the body is completely loaded. Dynamic inclusion requires some more tricks.
      • Try the above code using runcode.
      • Trial 2: Let's try the previous example again. But you need to use an ng-expression this time.
    • Read carefully all in AngularJS Introduction.
      • What is a JavaScript framework?
      • AngularJS extends HTML with ???, and binds data to HTML with ???
      • The ??? directive defines an AngularJS application.
      • The ??? directive defines the value of HTML controls (input, select, textarea) to application data.
      • The ??? directive binds application data to the HTML view.
      • The ??? directive initializes AngularJS application variables.
      • You can use ??? instead of ng-.
      • AngularJS ??? bind data to HTML the same way as the ng-bind directive.
      • AngularJS applications are controlled by controller. The ??? directive defines the controller.
      • When is the AngularJS controller code be executed?
      • Is it alright to say 'AngularJS introduces the programming with HTML elements.'?
    • Summary
      • ng-init: models (, i.e., variables,)
      • ng-model: binding models (, i.e., variables,) to input
      • ng-bind, expression: binding models to view (, i.e., output)
      • ng-controller, and corresponding script: interaction between HTML code and JavaScript code using models (i.e., variables)
    • [You may skip the next topics.]
    • Read all in AngularJS Expressions.
      • What if ng-app directive is missing?
      • AJS numbers, strings, objects and arrays are like JS.
      • How can you use ng-bind instead of expressions? Study the 4th example.
      • What can you use instead of ng-init?
      • Can you use objects and arrays with AJS?
      • What if there is an error in an AJS expression?
    • Read all in AngularJS Modules.
    • Read all in AngularJS Directives.
      • The ??? directive defines the root element of an AJS application.
      • The ??? directive defines initial values for an AJS application.
      • Data binding in AJS, 'synchronizes' AngularJS expressions with AngularJS data. What does 'synchronizes' mean?
      • The ??? directive repeats an HTML element.
    • How to access AJS models? Read all in AngularJS Controllers.
      • For what do you use AJS controllers?    Bidirectional connection between your JS code and AngularSJ; AJS models are used as varibles in JS code, and variables in JS code can be used as AJS models.
      • AJS ??? control the data of AJS applications. They are regular JS ???.
      • AJS invokes controllers with a ??? object. In AJS, ??? is the application object (the owner of application variables and functions).
      • AJS controllers can have ??? as well as ???.
      • How to store controllers in external files and use them?
      • List 5 directives.
      • Can you use the above directive to display the list after you receive JSON data using jQuery?
    • How to use Ajax with AJS? Read all in AngularJS AJAX.
      • ??? is an AJS service for reading data from remove servers.
      • ??? is an XMLHttpRequest object.
      • ??? is a core service for reading data from web servers. and ??? is the function to use for reading server data.
      • What if the server data is changed while the client program is running?
      • How to use 'post' instead of 'get'?
      • Read the examples in 'General usage' in $http.
    • Read all in AngularJS Tables.
      • The ??? directive is perfect for displaying tables.
      • It is very nice.
    • You may read more topics, such as event manipulation and DOM manipulation.
      • Read all in AngularJS Filters.
        • Filters can be added to expressions and directives using a ??? character.
        • List 5 filters.
        • How to use the filters?
        • How to sort in descending order?
        • What can you do with an input filter?
      • Read all in AngularJS SQL.
        • Requests for data from a different server (than the requesting page), are called ??? HTTP requests. In most browsers, ??? requests are restricted to same site for security reasons. What does this mean?
        • How to let browsers allow cross-site access?
        • How to send JSON data from a PHP program?
      • Read all in AngularJS HTML DOM.
        • The ??? directive binds AJS application data to the 'disabled' attribute of HTML elements.
        • The ??? directive shows or hides an HTML element.
        • The ??? directive hides or shows an HTML element.
        • Any directive value can be an expression.
      • Read all in AngularJS Events.
        • The ??? directive defines an AJS click event.
        • In the first example, where is 'count' defined?
        • The ??? directive defines an AJS double click event.
        • Read 'AngularJS Event Listener Directives' in AngularJS Events for more events.
      • Read all in AngularJS Modules.
        • ??? define applications. All application controllers should belong to a ???.
        • Study closely 'myAppljs' and 'myCtrol.js' in the 1st example.
        • G??? values should be avoided in applications. They can easily be overwritten or destroyed by other scripts.
        • When an AJS application does not have a name, and the controller function is g???.
        • How to resolve the global namespace issue?
        • When an application has a name with the ??? directive, the controller is a property of the application ???.
      • Read all in AngularJS Forms.
        • What does 'novalidate' attribute do?
        • What if '$scope.user = $scope.master;' in the example?
      • Read all in AngularJS Input Validation.
        • Is server-side validation still necessary?
        • Each form directive creates an instance of FormController. Read all in form.FormController for more properties.
      • Read all in AngularJS Includes.
        • Any good idea to use JS to include HTML in HTML?
        • With AJS, you can include HTML content, using the ??? directive.
      • Read all in AngularJS Application.
    • Full reference - Guide to AngularJS Documentation
    • Access between your JS code and AngularJS: You may read AngularJS - Access Scope from outside function as well. This will give you ideas how to access AngularJS from you JS code.

  3. Learning outcomes
    • Use AngularJS for data binding in simple applications.